const { SkeletonPlugin } = require("page-skeleton-webpack-plugin");
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, "..", dir);
}
let productionConfig = {
  //打包配置文件
  productionGzip: false,
  productionGzipExtensions: ["js", "css", "svg"]
};
module.exports = {
  configureWebpack: () => {
    let plugins = [];
    if (process.env.NODE_ENV === "production") {
      // 是否需要生成打包gzip文件  默认false 如果为true 需npm install compression-webpack-plugin -S
      if (productionConfig.productionGzip) {
        const compressionWebpackPlugin = require("compression-webpack-plugin");
        plugins.push(
          // 压缩代码
          new compressionWebpackPlugin({
            test: new RegExp(
              "\\.(" +
                productionConfig.productionGzipExtensions.join("|") +
                ")$"
            ), // 匹配文件名
            threshold: 10240, // 对超过10k的数据压缩
            deleteOriginalAssets: false
          })
        );
      }
    } else {
      plugins.push(
        new SkeletonPlugin({
          pathname: path.resolve(__dirname, "./shell"),
          staticDir: path.resolve(__dirname, "./dist"),
          routes: ["/", "/about"]
        })
      );
    }
    return {
      resolve: {
        modules: [resolve("src"), resolve("node_modules")]
      },
      plugins: plugins,
      externals: {
        vue: "Vue",
        vuex: "Vuex",
        "vue-router": "VueRouter",
        axios: "axios"
      }
    };
  },
  chainWebpack: config => {
    config.module
      .rule("stylus")
      .oneOf("vue")
      .use("px2rem-loader")
      .loader("px2rem-loader")
      .before("postcss-loader") // this makes it work.
      .options({
        remUnit: 37.5
      })
      .end();
    if (process.env.NODE_ENV !== "development") {
      config.plugin("html").tap(opts => {
        opts[0].minify.removeComments = false;
        return opts;
      });
    }
  }
};
